<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>程序猿的那些日子。</title>
    <style type="text/css">
        .container{height:200px; width:100%; text-align:center; position:fixed; margin:auto; top:0; left:0; right:0; bottom:0;}
        .radius{height:30px; width:30px; display:inline-block; position:relative; margin:auto; top:0; left:0; right:0; bottom:0; background:blue; border-radius:50%; animation:myfirst 3s linear 1s infinite alternate;}
        .radius2{height:20px; width:20px; display:inline-block; position:relative; margin:auto; top:0; left:55px; right:0; bottom:0; background:blue; border-radius:50%; animation:myfirst 2s linear 1.5s infinite alternate;}
        .radius3{height:15px; width:15px; display:inline-block; position:relative; margin:auto; top:0; left:0; right:55px; bottom:0; background:blue; border-radius:50%; animation:myfirst 1s linear 2s infinite alternate;}
        .radius4{height:20px; width:20px; display:inline-block; position:relative; margin:auto; top:0; left:55px; right:0; bottom:0; background:blue; border-radius:50%; animation:myfirst 2s linear 2.5s infinite alternate;}
        .radius5{height:25px; width:25px; display:inline-block; position:relative; margin:auto; top:0; left:55px; right:0; bottom:0; background:blue; border-radius:50%; animation:myfirst 2.5s linear 3s infinite alternate;}
        .content{position:relative; margin:auto; top:80px;}
        @keyframes myfirst{
            0% {background:red; top:10px;}
            25% {background:blue; top:50px;}
            50% {background:yellow; top:80px;}
            75% {background:green; top:50px;}
            100% {background:yellowgreen; top:10px;}
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var con = document.getElementsByClassName('content');
            var oldDate = '2017/02/07 00:00:00';
            var oldLove = '2015/03/20 09:22:52';
            setInterval(function () {
                var activeDate = new Date();
                var diffDate = activeDate.getTime() - new Date(oldDate).getTime();


                var days = Math.floor(diffDate/(24*3600*1000));
                var leave1 = diffDate%(24*3600*1000);
                var hours = Math.floor(leave1/(3600*1000));
                var leave2 = leave1%(3600*1000);
                var minutes = Math.floor(leave2/(60*1000));
                var leave3 = leave2%(60*1000);
                var seconds = Math.round(leave3/1000);
                con[0].innerHTML = "至做程序猿的第<i style='color:red;'> " + days + " </i>天<i style='color:red;'> " + hours + " </i>时<i style='color:red;'> " + minutes + " </i>分<i style='color:red;'> " + seconds + " </i>秒";
            }, 1000);

            setInterval(function () {
                var activeDate = new Date();
                var diffDate = activeDate.getTime() - new Date(oldLove).getTime();


                var days = Math.floor(diffDate/(24*3600*1000));
                var leave1 = diffDate%(24*3600*1000);
                var hours = Math.floor(leave1/(3600*1000));
                var leave2 = leave1%(3600*1000);
                var minutes = Math.floor(leave2/(60*1000));
                var leave3 = leave2%(60*1000);
                var seconds = Math.round(leave3/1000);
                con[1].innerHTML = "坚持不谈恋爱第<i style='color:red;'> " + days + " </i>天<i style='color:red;'> " + hours + " </i>时<i style='color:red;'> " + minutes + " </i>分<i style='color:red;'> " + seconds + " </i>秒";
            }, 1000);
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="radius"></div>
        <div class="radius2"></div>
        <div class="radius3"></div>
        <div class="radius4"></div>
        <div class="radius5"></div>
        <div class="content" style="color:yellowgreen;">

        </div>
        <div class="content" style="color:grey;">

        </div>
        <div class="content"></div>
    </div>
</body>
</html>
